<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmits()" type="primary" long>注册</Button>
      <modal
              v-model="modal1"
              title="注册"
              @on-ok="ok"
              @on-cancel="cancel">
        <FormItem prop="userName">
          <Input v-model="registe.userName" placeholder="请输入用户名">
          <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="registe.password" placeholder="请输入密码">
          <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
          </Input>
        </FormItem>
      </modal>
      <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
import axios from 'axios'
export default {
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      form: {
        userName:'',
        password:''
      },
      registe:{
        userName:'',
        password: ''
      },
        modal1:false,
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
  //注册功能
  handleSubmits() {
    this.modal1=true;

  },
  ok()
  {
      axios.post('api/register?name='+this.registe.userName+'&password='+this.registe.password).then((res=>{
          console.log(res.data);
          if (res.data==2){
              this.$Message.error('用户名称重复');
          }else{
              this.$Message.success('注册成功');
          }

      }))
  },
  cancel()
  {
      console.log('您点击了取消');
  },
//注册功能end
    handleSubmit () {
      axios.get('api/register/store?userName='+this.form.userName+'&password='+this.form.password).then((res)=>{
         if(res.data==1){
             this.$router.push({
                 path:'/home',
                 name:'home'
             })
         }else{
             this.$Message.error(res.data);
         }
      });


    }
  }
}
</script>
